<template>
  <div>
    <navigator></navigator>
  </div>
  <div class="goodsDetail-simple">
    <el-row gutter="20">
      <el-col span="4">
        <img src="@/assets/home/img.png" class="goodsDetail-goodsimg">
      </el-col>
      <el-col span="20">
        <div class="goodsDetail-name">
          <h4>{{ goodsName }}</h4>
        </div>
        <el-row gutter="20">
          <el-col span="16">
            <div style="margin-left: 45px">
              <p>价格</p>
            </div>
          </el-col>
          <el-col span="8">
            <div style="margin-left: 50px;margin-top: 18px">
              <p style="color: red">¥{{ goodsPrice }}</p>
            </div>
          </el-col>
        </el-row>
        <el-row gutter="20" style="margin-top: -20px">
          <el-col span="16">
            <div style="margin-left: 45px">
              <p>作者</p>
            </div>
          </el-col>
          <el-col span="8">
            <div style="margin-left: 50px;margin-top: 18px">
              <p>{{ userName }}</p>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: -20px">
          <el-col span="12">
            <div style="margin-left: 45px">
              <p>上架时间</p>
            </div>
          </el-col>
          <el-col span="12">
            <div style="margin-left: 40px;margin-top: 18px">
              <p>{{ goodsUpTime }}</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="20">
            <div class="goodsDetail-simpleIntroduce">
              <p>{{ goodsDes }}</p>
            </div>
          </el-col>
          <el-col span="4">
            <div class="goodsDetail-button">
              <el-button type="button" @click="dialogTableVisible = true">立即购买</el-button>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
  <el-dialog title="请选择支付方式" v-model="dialogTableVisible">
    <div>
      <p style="font-size: 25px;margin-top: -15px;color: black">{{ goodsName }}</p>
    </div>
    <div>
      <p style="color: red;font-size: 60px;margin-top: 10px">
        ¥{{ goodsPrice }}
      </p>
    </div>
    <div>
      <el-row>
        <el-col span="12">
          <div class="pay-img1">
            <img src="@/assets/goodsDetail/wallet.png">
          </div>
          <div style="margin-left: 170px;margin-top: 10px">
            <el-button type="text" @click="purchase" style="color: black">钱包支付</el-button>
          </div>
        </el-col>
        <el-col span="12">
          <div class="pay-img2">
            <img src="@/assets/goodsDetail/wechat.png">
          </div>
          <div style="margin-left: 280px;margin-top: 10px">
            <el-button type="text" @click="dialogTableVisible = true" style="color: black">微信支付</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
  <el-row>
    <div class="goodsDetail-author">
      <i class="el-icon-s-custom" style="font-size: 25px;color: #003399"></i>
      作者简介
    </div>
  </el-row>
  <el-row>
    <div class="goodsDetail-author-introduce">
      <p style="text-align: left">
        {{ userDes }}</p>
    </div>
  </el-row>
  <el-row>
    <div class="goodsDetail-author">
      <i class="el-icon-s-marketing" style="font-size: 25px;color: #003399"></i>
      条件单详情
    </div>
  </el-row>
  <el-row>
    <div id="main" style="width: 600px;height:400px;margin-left: 20%; margin-top: 50px"></div>
  </el-row>
</template>

<script lang="ts" src="./goodsDetail.ts">

</script>

<style scoped>
.goodsDetail-simple {
  margin-left: 20px;
  width: 1400px;
  height: 320px;
}

.goodsDetail-goodsimg {
  margin-top: 30px;
  margin-left: 30px;
  width: 200px;
  height: 260px;
  border-radius: 10px;
}

.goodsDetail-name {
  margin-top: 50px;
  margin-left: 40px;
  width: 300px;
  height: 20px;
  text-align: left;
}

.goodsDetail-simpleIntroduce {
  width: 800px;
  height: 400px;
  margin-top: -15px;
  margin-left: 40px;
  text-align: left;
}

.goodsDetail-button {
  margin-left: 100px;
  margin-top: 55px;
}

.goodsDetail-author {
  margin-left: 43px;
}

.goodsDetail-author-introduce {
  margin-left: 43px;
  width: 1250px;
}

.pay-img1 {
  width: 40px;
  height: 40px;
  margin-left: 170px;
}

.pay-img2 {
  width: 40px;
  height: 40px;
  margin-left: 270px;
}
</style>
